<template>
  <div class="dashboard-container">
    <div class="app-container">

      <PageTools>
        <!-- 左侧具名插槽 -->
        <template #left>
          <span>共 19 条记录</span>
        </template>

        <!-- 右侧具名插槽 -->
        <template #right>
          <el-button v-power="'import'" type="danger" size="small" @click="$router.push('/excel')">导入excel</el-button>
          <el-button v-power="'export'" type="success" size="small" @click="ExportExcelFn">导出excel</el-button>
          <el-button type="primary" size="small" @click="dialogVisible = true">新增员工</el-button>
        </template>
      </PageTools>

      <el-card style="margin-top: 10px;">
        <el-table :data="employeesList" border :default-sort="{prop: 'workNumber', order: 'descending'}">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <!-- <img class="staffPhoto" :src="scope.row.staffPhoto" alt=""> -->
              <image-holder :src="scope.row.staffPhoto" class="staffPhoto" />
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" />
          <el-table-column prop="workNumber" label="工号" />
          <el-table-column prop="formOfEmployment" label="聘用形式" :formatter="formatterFn" />
          <el-table-column prop="departmentName" label="部门" />
          <el-table-column label="入职时间">
            <template slot-scope="scope">
              {{ scope.row.timeOfEntry | filtersFn }}
            </template>
          </el-table-column>
          <el-table-column label="转正时间">
            <template slot-scope="scope">
              {{ scope.row.correctionTime | filtersFn }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="$router.push('/employees/detail?id=' + scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="assigningRoles(scope.row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="deleteFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>

          <!-- 分页组件 -->
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <!-- 分页区域 -->
            <el-pagination
              :current-page="query.page"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="query.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>

          <!--@close="dialogClose" 这个是关闭弹框是触发的事件与子传父的 @close="dialogVisible = false" 没有关系-->
          <el-dialog
            title="新增员工"
            :visible.sync="dialogVisible"
            width="50%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="dialogClose"
          >
            <emp-dialog ref="AddEmployee" @close="dialogVisible = false" @update-empolyee="updateempolyee" />
          </el-dialog>
        </el-table>
      </el-card>

      <!-- 设置角色组件弹框 -->
      <el-dialog title="分配角色" :visible="showRoleDialog" @close="cancleDialog">
        <!-- 设置角色组件 -->
        <assign-role v-if="showRoleDialog" :user-id="userId" @close="showRoleDialog = false" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入获取员工列表接口函数 ,根据id删除员工信息
import { getstaff, delEmployee } from '@/api/employees'
// 导入枚举
import employees from '@/constant/employees'
// 导入弹窗新增员工组件
import EmpDialog from './empDialog.vue'
// 导入day.js包
import dayjs from 'dayjs'
// 导入错误图片组件
import ImageHolder from '@/components/ImageHolder'
// 导入分配角色弹框组件
import AssignRole from './assignRole'
export default {
  name: 'Employees',
  components: {
    EmpDialog,
    ImageHolder,
    AssignRole
  },
  // 过滤器,本质就是个函数
  filters: {
    // 处理数据的执行函数
    filtersFn(val) {
      // 如果没有值
      if (!val) return
      // 给dayjs传入需要格式化的数据
      // 给format传入需要的时间格式
      return dayjs(val).format('YYYY-DD-MM')
    }
  },
  data() {
    return {
      query: {
        page: 1, // 页码
        size: 10 // 每页条数
      },
      employeesList: [], // 员工列表
      total: 0, // 数据总条数
      dialogVisible: false, // 控制新增员工的对话框显示与隐藏
      showRoleDialog: false, // 控制分配角色弹窗的显示与隐藏
      userId: ''
    }
  },
  created() {
    // 调用获取员工函数
    this.getstaff()
  },
  methods: {
    // 分配角色
    assigningRoles(id) {
      // 获取到点击的员工id
      // console.log(id)
      this.userId = id
      this.showRoleDialog = true
    },

    // 关闭分配角色弹框
    cancleDialog() {
      this.showRoleDialog = false
    },

    // 格式化函数,接口返回的key值是英文的,我们需要转换为中文
    transData(rows) {
      // 设置一个枚举的对象
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }

      // 用对象的keys方法获取到枚举对象中的键,组成一个新的数组['id','username'...]
      const headerKeys = Object.keys(map)

      // 用数组的map方法迭代原数组,生成新数组
      const header = headerKeys.map(item => {
        // map[item] 是获取到枚举对象中的value值,中文名称,然后作为返回值,返回成为一个新数组
        return map[item]
      })

      // 用数组的map方式,将当前数组中每一个对象,组成一个新的数组
      const data = rows.map(item => {
        const arr = {}
        // 遍历英文名数组
        headerKeys.forEach(value => {
          // 给空对象赋值,键为英文名,值为传入对象的值
          arr[value] = item[value]
        })
        return Object.values(arr)
      })

      return {
        header,
        data
      }
    },
    // 点击导出excel事件
    async ExportExcelFn() {
      // 重新发请求,拿到部门最新的数据,进行格式化
      const res = await getstaff(this.query)
      // console.log(res)
      // 格式化后返回的数据
      const { header, data } = this.transData(res.data.rows)
      // console.log(header, data)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: '员工列表', // 导出的文件名
          autoWidth: true, // 自适应宽度
          bookType: 'xlsx' // 导出的文件类型
        })
      })
    },

    // 关闭弹窗时触发的事件是Element组件中的方法
    dialogClose() {
      // 获取到子组件实例,然后调用子组件中的重置检验方法
      this.$refs.AddEmployee.resetFormFn()
    },
    // 子传父,关闭弹窗,重新加载数据
    updateempolyee() {
      this.dialogVisible = false
      this.getstaff()
    },
    // 根据id删除员工信息
    async deleteFn(id) {
      // console.log(id)
      const confirmRes = await this.$confirm('您确定要删除该员工信息吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmRes === 'cancel') return this.$message('您取消删除成功')

      // 点击的是确定,发生删除员工请求
      const res = await delEmployee(id)

      // 处理异常分页,如果当前页的员工列表数组长度为1,
      if (this.employeesList.length === 1) {
        this.query.page--
      }
      if (this.query.page <= 0) {
        this.query.page = 1
      }

      // 提示删除成功
      this.$message(res.message)
      // 重新获取员工信息列表
      this.getstaff()
    },

    // 格式化数据
    formatterFn(row, column, cellValue, index) {
      // 用数组的find方法找到id === 1 的元素,在返回该对象的value值
      const item = employees.hireType.find(item => item.id === Number(cellValue))
      // console.log(id)
      return item ? item.value : '未知'
    },

    // 获取员工
    async getstaff() {
      const res = await getstaff(this.query)
      this.employeesList = res.data.rows
      this.total = res.data.total
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange(newSize) {
      this.query.size = newSize
      this.getstaff()
    },

    // 当前页面发生改变时触发
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getstaff()
    }
  }
}
</script>

<style lang="scss" scoped>
.staffPhoto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
